<template>
  <div class="search">
    <h3 @click="back">&lt; 搜索</h3>
    <div class="sousuo">
      <input
        type="text"
        placeholder="搜索商家、商品名称"
        v-model="inputText"
      /><span @click="seach">搜索</span>
    </div>
    <div class="ss1" v-show="!shoplist.length">
      <div class="box">
        <h4>历史搜索 <span @click="qingkong">清空</span></h4>
        <div class="list">
          <div class="wenzi" v-for="(item, index) in tacklist" :key="index">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="box">
        <h4>搜索发现</h4>
        <div class="list">
          <span class="wenzi" v-for="(item, index) in tacklist1" :key="index">{{
            item.name
          }}</span>
        </div>
      </div>
    </div>
    <p class="kong" v-show="count&&!shoplist.length">没有搜索到，换个词试试吧</p>
    <div class="ss2" v-show="shoplist.length">
      <div class="nav">
        <p>综合排序↓</p>
        <p>销量最高</p>
        <p>距离最近</p>
        <p>筛选</p>
      </div>
      <div class="biaoqian">
        <div class="list">
          <span v-for="(item, index) in list" :key="index">{{
            item.name
          }}</span>
        </div>
      </div>
    </div>
    <div class="item" v-for="(item, index) in shoplist" :key="index">
      <div class="left">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="right">
        <h5>{{ item.name }}</h5>
        <div class="d1">
          <p>
            <span>⭐{{ item.wmPoiScore / 10 }}</span
            >{{ item.monthSalesTip }}
          </p>
          <p>{{ item.deliveryTimeTip }} {{ item.distance }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入axios
import { shop_search } from "../../api";

export default {
  methods: {
    back() {
      this.$router.push("/home/index");
    },
    // 点击搜索
    seach() {
      this.count = true
      if (this.inputText) {
        var obj = { name: this.inputText };
        this.tacklist.push(obj);
        shop_search({ searchkey: obj.name }).then((res) => {
          console.log(res.data.list);
          this.shoplist = res.data.list;
        });
      }
      this.inputText = "";
    },
    qingkong() {
      this.tacklist = [];
    },
  },
  data() {
    return {
      count:false,
      inputText: "",
      shoplist: [],
      tacklist: [],
      tacklist1: [
        { name: "麻辣烫" },
        { name: "米线" },
        { name: "披萨" },
        { name: "龙虾" },
        { name: "腊八粥" },
        { name: "老八秘制小汉堡" },
      ],
      list: [{ name: "年货节热卖" }, { name: "津贴联盟" }],
    };
  },
};
</script>

<style scoped>
.search {
  padding: 10px;
}

.search .sousuo {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search .sousuo input {
  width: 250px;
  height: 30px;
  border-radius: 15px;
  border: 0;
  background-color: rgb(230, 226, 226);
  padding-left: 20px;
}

.search .sousuo span {
  color: blue;
}

.search .box {
  margin-top: 20px;
}

.search .box h4 span {
  color: gray;
  float: right;
  font-size: 12px;
  font-weight: 400;
}

.search .box .list {
  font-size: 12px;
  margin-top: 5px;
  width: 100%;
}

.search .box .list .wenzi {
  padding: 5px;
  background-color: rgb(205, 205, 205);
  display: inline-block;
  margin: 5px;
}
.search .nav {
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin-top: 10px;
}
.biaoqian .list {
  font-size: 12px;
  margin-top: 10px;
}
.biaoqian .list span {
  padding: 4px 5px;
  background-color: rgb(235, 235, 235);
  margin-right: 5px;
  border-radius: 5px;
}
.item {
  display: flex;
  margin-top: 15px;
  /* background-color: pink; */
  align-items: center;
}
.item .left {
  width: 20%;
}
.item .left img {
  width: 100%;
}
.item .right {
  flex: 1;
  margin-left: 10px;
  /* height: 190px; */
}
.item .right .d1 {
  display: flex;
  font-size: 12px;
  color: gray;
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: space-between;
}
</style>